<template>
  <a-drawer
    title="详细信息"
    placement="right"
    :closable="true"
    :visible="drawerVisible"
    :mask="false"
    width="100%"
    class="fra-drawer fra-drawer-item-details item-details-main-box"
    :class="{'fra-monitoring-drawer':drawerOverClass}"
    :get-container="getContainer"
    :wrap-style="{ position: 'absolute' }"
    :after-visible-change="afterVisibleChange"
    @close="onClose"
  >
    <a-spin :spinning="getEventDetailLoading">
      <a-row type="flex" class="c-grid-box">
        <a-col class="c-g-b-wd1">
          <div class="fw-b fs-12 color-r">机号</div>
          <a class="fs-18 fw-b numbers" @click="(e)=>rpHandler(e,'flightLegHistoryVisible')">{{ currentItem.tailnumber ||'--' }}</a>
        </a-col>
        <a-col class="c-g-b-wd2">
          <div class="fw-b fs-12 color-r">机队</div>
          <div class="fs-18 fw-b color-title  numbers">{{ currentItem.fleet||'--' }}</div>
        </a-col>
        <a-col class="c-g-b-wd3">
          <div class="fw-b fs-12 color-r">航班</div>
          <a class="fs-18 fw-b numbers" @click="(e)=>rpHandler(e,'flightLegDetailsVisible')">{{ currentItem.currentFlight||'--' }}</a>
        </a-col>
        <a-col class="c-g-b-wd4">
          <div class="fw-b fs-12 color-r">航段</div>
          <div class="fs-18 fw-b color-title  numbers">{{ $legHandler(currentLegInfo.leg,currentItem.totalLeg) }}</div>
        </a-col>
        <a-col class="c-g-b-wd5">
          <div class="fw-b fs-12 color-r">更新时间</div>
          <div class="fw-b fs-13">
            <span class="fs-18 color-title mr-4 numbers">{{ currentItem.latestAcarsTime? $moment.utc(currentItem.latestAcarsTime).format('HH:mm') :'--' }}</span>
            <span class="color-s  numbers">{{ currentItem.latestAcarsTime? $moment.utc(currentItem.latestAcarsTime).format('MM-DD'):'--' }}</span>
          </div>
        </a-col>
        <a-col class="c-g-b-wd6 pt-10">
          <div class="text-c"><oooiSvg :step="oooiStep.step" :time="oooiStep.time" /></div>
        </a-col>
        <a-col class="c-g-b-w2d">
          <sliderItem :current-leg-info="currentLegInfo" />
        </a-col>
        <a-col class="c-g-b-wd7 ">
          <div class="text-r mt-18 pr-30">
            <reportList :record="currentItem" :index="rowIndex" :report-handler="reportHandler" />
          </div>
        </a-col>
      </a-row>

      <!-- 当前航班 -->

      <div class="item-details-content">
        <div v-if="currentFlights.length>0">

          <div class="fs-14 mb-5 mt-10 fw-b idc-color">当前航班</div>
          <div v-for="(item,index) in currentFlights" :key="item.id" class="cu-pointer" @click="(e)=>clickEvent(e,item,{},index)">

            <a-row class="item-details-item-box  mb-10" :gutter="2">
              <a-col :span="2">
                <noticePriorityIcon :is-etops="item.isEtops" :priority="item.priority" :msg-type="item.name" />
              </a-col>
              <a-col :span="2">
                <div class="fw-b">{{ item.msgType==='Alert'?item.msgType:'' }}</div>
                <span v-if="item.msgType!=='Alert'" :class="['va-top',item.msgType==='Alert'?'':'fw-b']">{{ item.name }}</span>
              </a-col>
              <a-col :span="3">
                <span class="fw-b text-color-5a87f7" :title="item.code">{{ item.code||'--' }}</span>

              </a-col>
              <a-col :xl="5" :xxl="7">
                <span class="fw-b  fs-13 text-color-5a87f7" :title="item.description">{{ item.description||'--' }}</span>

              </a-col>
              <a-col :span="2">
                <div v-if="!['EF','EFFDE','EFDE'].includes(item.msgType)" class="fw-b">{{ item.msgTime? $moment.utc(item.msgTime).format('HH:mm') :'--' }}</div>
                <div v-if="!['EF','EFFDE','EFDE'].includes(item.msgType)" class="fs-13 color-s">{{ item.msgTime? $moment.utc(item.msgTime).format('MM-DD'):'--' }}</div>
              </a-col>
              <a-col :span="2">
                <div class="fs-13 ">{{ item.msgType || '--' }}</div>
              </a-col>
              <a-col :span="2">
                <span class="fw-b text-color-5a87f7">{{ item.activity?activeHandler(item.activity):'--' }}</span>
              </a-col>
              <a-col :span="4">
                <dotHistory
                  :event-type="item.msgType==='Alert'?item.msgType:item.name"
                  type="t2"
                  :code="item.code"
                  :tailnumber="item.tailnumber"
                  :data="item.legs"
                  :dot-type="item.legStatus"
                  :leg="$legHandler(item.leg,currentItem.totalLeg)"
                  :c-leg="item.leg"
                />
              </a-col>

              <a-col v-for="item2 in item.childrenEvents" :key="item2.id" :span="24" class="mb-4">
                <a-row>
                  <a-col :offset="4" :xl="3" :xxl="3">
                    <div class="fs-13 mt-6">{{ item2.code||'--' }}</div>
                  </a-col>
                  <a-col :xl="5" :xxl="7">
                    <div class="fs-13  mt-6">{{ item2.description ||'--' }}</div>
                  </a-col>
                </a-row>
              </a-col>
            </a-row>
          </div>
        </div>
        <!-- 历史航班 -->
        <div v-if="pastFlights.length>0">

          <div class="fs-15 mb-15 mt-10 fw-b font-c-b">历史航班</div>
          <div v-for="(item,index) in pastFlights" :key="item.id">
            <div class="mb-12 mt-2">
              <a class="idc-color fs-13 mr-16">{{ item.flightNo }}</a>
              <a class=" fs-13" @click="airportInfoHandler(item.arrCode3)">{{ item.arrCode3 }}</a>
              <span class="ml-5 mr-5 c-arrow color-s">······</span>
              <a class=" fs-13 mr-16" @click="airportInfoHandler(item.depCode3)">{{ item.depCode3 }}</a>
              <span class="idc-color fs-13 mr-16">{{ item.outTime? $moment.utc(item.outTime).format('YYYY-MM-DD HH:mm:ss'):'--' }}</span>

            </div>
            <a-row class="item-details-item-box mb-10" :gutter="1">

              <a-col v-for="(item4,index4) in item.events" :key="item4.id" :span="24" class="mb-6 cu-pointer" @click="(e)=>clickEvent(e,item4,item,currentFlights.length+index,index4)">
                <a-row>
                  <a-col :span="2">
                    <noticePriorityIcon :is-etops="item4.isEtops" :priority="item4.priority" :msg-type="item4.name" />

                  </a-col>
                  <a-col :span="2">
                    <div class="fw-b">{{ item4.msgType==='Alert'?item4.msgType:'' }}</div>
                    <span v-if="item4.msgType!=='Alert'" :class="['va-top',item4.msgType==='Alert'?'':'fw-b']">{{ item4.name }}</span>
                  </a-col>
                  <a-col :span="3">
                    <span class="fw-b text-color-5a87f7" :title="item4.code">{{ item4.code||'--' }}</span>

                  </a-col>
                  <a-col :xl="5" :xxl="7">
                    <span class="fs-13  text-color-5a87f7" :title="item4.description">{{ item4.description }}</span>

                  </a-col>
                  <a-col :span="2">
                    <div v-if="!['EF','EFFDE','EFDE'].includes(item4.msgType)" class="fw-b">{{ item4.msgTime? $moment.utc(item4.msgTime).format('HH:mm') :'--' }}</div>
                    <div v-if="!['EF','EFFDE','EFDE'].includes(item4.msgType)" class="fs-13 color-s">{{ item4.msgTime? $moment.utc(item4.msgTime).format('MM-DD'):'--' }}</div>
                  </a-col>
                  <a-col :span="2">
                    <div class="fs-13 ">{{ item4.msgType || '--' }}</div>
                  </a-col>
                  <a-col :span="2">
                    <span class="fw-b text-color-5a87f7">{{ item4.activity?activeHandler(item4.activity):'--' }}</span>
                  </a-col>
                  <a-col :span="4">
                    <dotHistory
                      type="t2"
                      :event-type="item4.msgType==='Alert'?item4.msgType:item4.name"
                      :code="item4.code"
                      :tailnumber="item4.tailnumber"
                      :data="item4.legs"
                      :dot-type="item4.legStatus"
                      :leg="$legHandler(item4.leg,currentItem.totalLeg)"
                      :c-leg="item4.leg"
                    />
                  </a-col>
                  <a-col v-for="item5 in item4.childrenEvents" :key="item5.id" :span="24" class="mb-4">
                    <a-row>
                      <a-col :offset="4" :xl="3" :xxl="3">
                        <div class="fs-13 mt-6">{{ item5.code||'--' }}</div>
                      </a-col>
                      <a-col :xl="5" :xxl="7">
                        <div class="fs-13  mt-6">{{ item5.description ||'--' }}</div>
                      </a-col>
                    </a-row>
                  </a-col>
                </a-row>
              </a-col>
            </a-row>
          </div>
        </div>
        <!-- <DynamicScroller
          :items="pastFlights"
          :min-item-size="54"
          class="scroller beauty-scroll"
        >

          <template v-slot="{ item, index, active }">
            <DynamicScrollerItem
              :item="item"
              :active="active"
              :size-dependencies="[
                item.childrenEvents,
              ]"
              :data-index="index"
            >

            </DynamicScrollerItem>
          </template>
        </DynamicScroller> -->

      </div>
    </a-spin>
  </a-drawer>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex';
import oooiSvg from '@/pages/components/oooi';
import dotHistory from '@/pages/components/dotHistory';
import { activeList } from '@/pages/common/constant.js';
import reportList from '../../reportList';
import sliderItem from '@/pages/fraMonitoring/components/sliderItem.js';
export default {

  components: {
    oooiSvg,
    dotHistory,
    sliderItem,
    reportList
  },
  props: {
    currentItem: {
      type: Object,
      default: () => {}
    },
    drawerVisible: {
      type: Boolean,
      default: false
    },
    rowIndex: {
      type: Number,
      default: 0
    },
    reportHandler: {
      type: Function,
      default() {
        return function() {};
      }
    }
  },
  data() {
    return {
      activeList,
      drawerOverClass: false
    };
  },
  computed: {
    ...mapState('fraMonitoring', [
      'getEventDetailData',
      'getEventDetailLoading'
    ]),
    // 当前航班
    currentFlights() {
      return this.getEventDetailData?.currentFlights ?? [];
    },
    // 历史航班
    pastFlights() {
      return this.getEventDetailData?.pastFlights ?? [];
    },
    // 当前航段
    currentLegInfo() {
      return this.currentItem.flightLegs?.find(item => this.currentItem.totalLeg - item.leg === 0) ?? this.currentItem.flightLegs?.[0] ?? {};
    },

    // oooi信息
    oooiStep() {
      let step = 1;
      let time = '';
      const { outTime, offTime, onTime, inTime, latestAcarsTime } = this.currentLegInfo;

      if (inTime) {
        step = 5;
        time = this.$moment.utc(inTime).format('HH:mm');
      } else if (onTime) {
        step = 4;
        time = this.$moment.utc(onTime).format('HH:mm');
      } else if (this.currentItem.phase === 'ER') {
        step = 3;
        time = latestAcarsTime ? this.$moment.utc(latestAcarsTime).format('HH:mm') : this.$moment.utc(offTime).format('HH:mm');
      } else if (offTime) {
        step = 2;
        time = this.$moment.utc(offTime).format('HH:mm');
      } else if (outTime) {
        step = 1;
        time = this.$moment.utc(outTime).format('HH:mm');
      }
      return { step, time };
    }
  },
  watch: {
    'currentItem'(nv) {
      if (this.drawerVisible) {
        this.drawerOverClass = true;
        const params = {
          tailNumber: nv.tailnumber,
          time: nv.createTime
        };
        this.getEventDetail(params);
      }
    }
  },
  methods: {
    ...mapActions('fraMonitoring', [
      'getEventDetail'
    ]),
    ...mapMutations('fraMonitoring', [
      'setState'
    ]),
    clickEvent(e, eItem, item = {}, index, index4 = undefined) {
      this.$store.commit('eventMonitoring/setState', { key: 'dataType', payload: 3 });
      this.$store.commit('eventMonitoring/setState', { key: 'dataTypeIndex', payload: [index, index4] });
      this.reportHandler(e, { ...item, event: { ...eItem }, ...this.currentItem, ...eItem.ftmFlightLeg }, 'eventDetailsVisible', this.rowIndex);
    },
    airportInfoHandler(code) {
      this.setState({ key: 'airportInfoVisible', payload: true });
      localStorage.setItem('apInfoCode', code);
    },
    // drawer的容器
    getContainer() {
      return document.querySelector('.ant-table');
    },
    // 当drawer关闭后
    afterVisibleChange(visible) {
      if (!visible) {
        this.drawerOverClass = visible;
      }
    },
    rpHandler(e, flag) {
      const currentLeg = this.currentItem.flightLegs?.find(item => this.currentItem.totalLeg - item.leg === 0) ?? this.currentItem.flightLegs?.[0] ?? {};
      this.reportHandler(e, { ...this.currentItem, ...currentLeg }, flag, this.rowIndex);
    },

    // 当drawer点击关闭
    onClose() {
      this.$emit('update:drawerVisible', false);
    },
    // 计算事件点的偏移
    dotOffsetLeft(mt) {
      const e = this.currentLegInfo.inTime || this.currentLegInfo.eta;
      const dt = this.$moment.utc(e).diff(this.$moment.utc(this.currentLegInfo.outTime), 'minute');
      const msgdt = this.$moment.utc(mt).diff(this.$moment.utc(this.currentLegInfo.outTime), 'minute');
      return `${msgdt / dt * 100}%`;
    }

  }
};
</script>

<style lang="less">
@import './index.less';
.fra-drawer-item-details{
.direction-vertical{
  max-height: 500px;
}
}
.item-details-main-box{
  .ant-spin-nested-loading,.ant-spin-container,.ant-drawer-body{
    width: 100%;
  }
  .ant-spin-container{
    flex-direction: column;
  }
  .item-details-content{
    flex: 1;
  }
  .ant-drawer-wrapper-body,.ant-drawer-body,.ant-spin-nested-loading,.ant-spin-container{
    display: flex;
  }
}
</style>
